<template>
  <div class="flex-col-center-start index">
    <div class="item flex-row-center div1">
      <div class="text flex-col-center">
        <h2>YWriting 欢迎你</h2>

        <div class="summary">一个专注儿童打字练习的软件!</div>
       <Button1 @click="handleStartBtn" style="width: 200px;height: 50px">Start</Button1>
      </div>
      <div class="image">
        <img :src="keyboardImage" alt="键盘">
      </div>

    </div>

  </div>
</template>

<script setup lang="ts">
  import router from "@/router";
  import Button1 from "@/components/button/Button1.vue";
  let keyboardImage=require("@/assets/image/index/keyboard.png")
  let handleStartBtn=()=>{
    router.push("/home/index")
  }
</script>

<style scoped lang="less">
  .index{
    width: 100%;
    background-color: orange;
    .item{
      width: 100%;
      min-height: 100vh;
    }
    .div1{

      background: url("@/assets/image/index/bg1.png") center fixed no-repeat ;
      background-size: cover;
      .text{
        position: absolute;
        top: 25%;
        left: 20%;
        width: 20em;
        height: 15em;
        border-radius: 5px;
        padding: 1em;
        color: white;
        font-weight: 550;
        .summary{
          margin-top: 1em;
          margin-bottom: 2em;
          font-size: 14px;
          color: whitesmoke;
          font-weight: 500;
        }
      }
      .image{
        position: absolute;
        right: 10%;
        width: 40%;
        transition: all 0.5s;
        transform: rotate(-15deg);
        box-shadow:
            3.1px 3.2px 13.7px rgba(0, 0, 0, 0.124),
            10.5px 10.7px 22.9px rgba(0, 0, 0, 0.172),
            47px 48px 51px rgba(0, 0, 0, 0.2)
      ;
        border-radius: 5px;
        overflow: hidden;
        img{
          width: 100%;
        }
        &:hover{
          transform: scale(1.1);
          box-shadow: 0px 0px 25px whitesmoke;
        }
      }
    }


  }
</style>